<template>
  <div class="advance-table-body">
    <!--搜索栏-->
    <el-form class="search-form--inset search-form-custom" ref="elForm" :model="queryParams" inline size="small" label-width="100px" label-position="left">
      <el-row>
        <el-col :span="18">
          <el-form-item label="充值卡ID">
            <el-input v-model="queryParams.seqNo" placeholder="请输入" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="关联用户ID">
            <el-input v-model="queryParams.userId" placeholder="请输入" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="充值卡状态">
            <el-select v-model="queryParams.status">
              <el-option label="未充值" value="01"></el-option>
              <el-option label="已充值" value="02"></el-option>
              <el-option label="已作废" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成时间">
            <el-date-picker
              v-model="createTime"
              type="daterange"
              @change="changeTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <trust-query-filter-operation :searchAdvanced.sync="searchAdvanced" @query="searchAction" @reset="resetAction"></trust-query-filter-operation>
        </el-col>
      </el-row>
    </el-form>
    <!--操作栏-->
    <div class="table-operator">
      <el-button type="primary" size="small" plain @click="clickBtnAdd">充值卡生成</el-button>
      <el-button type="primary" size="small" plain @click="clickBtnTj">统计</el-button>
    </div>
    <!--表格-->
    <el-table
      class="k-table"
      ref="table"
      @selection-change="handleSelectionChange"
      :data="tableList"
      v-loading="loading"
    >
      <!--<el-table-column label="多选" type="selection" align="center" fixed width="50" />-->
      <el-table-column label="NO" type="index" align="center" :formatter="fIndex" fixed width="50" />
      <el-table-column label="充值卡ID" align="center" prop="seqNo" min-width="320px" show-overflow-tooltip />
      <el-table-column label="卡密" align="center" prop="pwd" min-width="320px" show-overflow-tooltip />
      <el-table-column label="充值卡点数" align="center" prop="points" min-width="100px" show-overflow-tooltip />
      <el-table-column label="充值卡状态" align="center" prop="statusLabel" min-width="100" show-overflow-tooltip />
      <el-table-column label="创建日期" align="center" prop="createTime" show-overflow-tooltip min-width="140"/>
      <el-table-column label="激活日期" align="center" prop="activationTime" min-width="100" show-overflow-tooltip />
      <el-table-column label="过期日期" align="center" prop="expirationTime" min-width="100" show-overflow-tooltip />
      <el-table-column label="关联订单号" align="center" prop="orderId" min-width="80" show-overflow-tooltip />
      <el-table-column label="关联用户ID" align="center" prop="userId" min-width="80" show-overflow-tooltip />
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="clickBtnDel(row)" :disabled="row.status!=='01'">作废</el-button>
          <el-button type="text" @click="clickBtnLook(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <trust-pagination
      :total="total"
      :page-size.sync="queryParams.pageSize"
      :current-page.sync="queryParams.pageNum"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></trust-pagination>
    <recharge-card-dialog ref="rechargeCardDialogRef"></recharge-card-dialog>
    <recharge-card-detail-dialog ref="rechargeCardDetailDialogRef"></recharge-card-detail-dialog>
    <recharge-card-t-j-dialog ref="rechargeCardTJDialogRef"></recharge-card-t-j-dialog>
  </div>
</template>
<script>
import { saTableMixin } from '@/views/custom/mixin/saTableMixin';
import request from '@/utils/request';
import RechargeCardDialog from '@/views/custom/rechargeCardManage/rechargeCardList/rechargeCardDialog.vue';
import RechargeCardDetailDialog from '@/views/custom/rechargeCardManage/rechargeCardList/rechargeCardDetailDialog.vue';
import RechargeCardTJDialog from '@/views/custom/rechargeCardManage/rechargeCardList/rechargeCardTJDialog.vue';
import zDate from '@/views/custom/tool/z-date';
export default {
  name: "rechargeCardList",
  components: { RechargeCardTJDialog, RechargeCardDetailDialog, RechargeCardDialog },
  mixins: [saTableMixin],
  data() {
    return {
      rules: [],
      options: [],
      createTime:[],
    }
  },
  mounted() {
    this.requestData("/card_info/list","get",this.queryParams);
  },
  methods:{
    clickBtnDel(row){
      this.$confirm('确定要作废吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.requestDataDel(row.id);
      }).catch(() => {

      });
    },
    clickBtnAdd(){
      this.$refs.rechargeCardDialogRef.openDiaolog(0,null,()=>{
        this.refreshTableData();
      });
    },
    clickBtnLook(row){
      this.$refs.rechargeCardDetailDialogRef.openDiaolog(1,row.id,()=>{
        this.refreshTableData();
      });
    },
    clickBtnTj(){
      this.$refs.rechargeCardTJDialogRef.openDiaolog(1,null,()=>{
        this.refreshTableData();
      });
    },
    //网络-作废
    requestDataDel(id){
      request({
        url:`/card_info/`,
        method:'put',
        data: {
          id:id,
          status:"03",
        },
      }).then(response =>{
        this.$message.success(response.msg);
        this.refreshTableData();
      })
    },
    changeTime(val){
      this.queryParams.startTimeForCreate = zDate.timeDateToStringYMD(val[0]);
      this.queryParams.endTimeForCreate = zDate.timeDateToStringYMD(val[1]);
    }
  }
}
</script>

<style scoped>
.search-form-custom{
}
</style>
